<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background-image: url("bg-cb2b2552e8.jpg");
            background-repeat: no-repeat;
            background-size: 1800px;
            background-position: center top;
        }
        .container {
            width: 1024px;
            margin: 0 auto;
        }
        .container .now {
            margin-top: 60px;
            height: 320px;
            color: white;
        }
        .now .left {
            float: left;
            height: 100%;
        }
        .now .right {
            float: right;
            height: 100%;
            margin-right: 80px;
        }
        .now:after {
            content: '';
            clear: both;
            display: block;
        }
        .update-time {
            font-size: 14px;
            opacity: 0.6;
        }
        .degree span:nth-child(1) {
            font-size: 80px;
        }
        .degree span:nth-child(2) {
            font-size: 30px;
        }
        .other .detail {
            margin-right: 30px;
        }
        .container .every-hour {
            border: 1px solid lightgray;
            height: 200px;
            border-radius: 5px;
            box-shadow: 0px 0px 20px 10px #dcdcdc;
            overflow: hidden;
            position: relative;
        }
        .a-btn {
            text-decoration: none;
            text-align: center;
            border: 1px solid black;
            border-radius: 50%;
            width: 20px;
            display: inline-block;
            height: 20px;
            line-height: 20px;
        }
        .tip1 {
            float: left;
        }
        .tip1:before {
            content: '';
            float: left;
            height: 7px;
            width: 7px;
            overflow: hidden;
            margin-right: 10px;
            background: #344665;
            border-radius: 50%;
            margin-top: 8px;
        }
        .hour-list {
            list-style: none;
            padding-left: 40px;
            position: absolute;
            width: 4800px;
            transition: all 1s ease;
        }
        .hour-list li {
            display: inline-block;
            margin-right: 40px;
            /* float: left;
            position: relative; */
        }
        .weather-icon {
            width: 30px;
        }
        .hour-list div {
            padding: 8px 0;
            text-align: center;
        }
    </style>
    <script src="../day02/jquery-1.9.0.js"></script>
    <script src="../template.js"></script>
    <script>
        // https://tianqi.qq.com/index.htm
        function loadData() {
            $.ajax({
                url: 'https://wis.qq.com/weather/common',
                type: 'get',
                data: 'source=pc&weather_type=observe|forecast_1h|forecast_24h|index|alarm|limit|tips|rise&province=江苏省&city=南京市&county=',
                dataType: 'jsonp'
            }).done((result)=>{
                console.log('result:', result);
                // 当前天气
                let observe = result.data.observe;
                // console.log('observe:', observe);
                observe.windArr = ["东风","南风","西风","北风","东南风","东北风","西南风","西北风"];
                let html1 = template("nowTemp", observe);
                $(".now").html(html1);

                let forecast_1h = result.data.forecast_1h;
                let rise = result.data.rise;
                // console.log('forecast_1h:', forecast_1h);

                let arr = [];
                // 数据处理
                for(let index in forecast_1h) {
                    let hourInfo = forecast_1h[index];
                    let timeArr = hourInfo.update_time.split("");
                    hourInfo.time = timeArr[8] + timeArr[9] + ":" + timeArr[10] + timeArr[11];
                    // console.log(hourInfo);
                    arr.push(hourInfo);
                    for(let key in rise){
                        let r = rise[key];
                        r.sunrise_time = r.time + "" + r.sunrise[0] + r.sunrise[1] + "0000";
                        r.sunset_time = r.time + "" + r.sunset[0] + r.sunset[1] + "0000";
                        if(hourInfo.update_time == r.sunrise_time){
                            arr.push({
                                type: 1, // 日出
                                icon: "rise",
                                text: "日出",
                                time: r.sunrise
                            });
                        }
                        if(hourInfo.update_time == r.sunset_time){
                            arr.push({
                                type: -1, // 日落
                                icon: "set",
                                text: "日落",
                                time: r.sunset
                            });
                        }
                    }
                }
                // console.log(arr);

                let html2 = template('hour-list-temp', {arr});
                $(".hour-list").html(html2);
            });
        }
        $(loadData);
        let index = 0;
        let arr = [0, -1022, -2044, -3066, -3482];
        function changeItem(type) {
            index = index+(type*1);
            if(index < 0 || index >= arr.length ){
                return;
            }
            $(".hour-list").css("left" , arr[index]);
            console.log(arr[index]);
        }
    </script>
</head>
<body>
    <div class="container" >
        <div class="now" >
            <div class="left">
                <div class="update-time" >终于气象台 07:50发布</div>
                <div class="degree" >
                    <span>9°</span>
                    <span>阴</span>
                </div>
                <div class="other" >
                    <span class="detail" >西北风 2级</span>
                    <span class="detail" >湿度 87%</span>
                    <span class="detail" >气压 1022hPa</span>
                </div>
            </div>
            <div class="right">
                <img src="http://mat1.gtimg.com/pingjs/ext2020/weather/pc/icon/currentweather/day/02.png" alt="">
            </div>
        </div>
        <script id="nowTemp" type="text/html" >
            <div class="left">
                <div class="update-time" >终于气象台 {{update_time[8]+''+update_time[9]+':'+update_time[10]+''+update_time[11]}}发布</div>
                <div class="degree" >
                    <span>{{degree}}°</span>
                    <span>{{weather}}</span>
                </div>
                <div class="other" >
                    <span class="detail" >{{windArr[wind_direction]}} {{wind_power}}级</span>
                    <span class="detail" >湿度 {{humidity}}%</span>
                    <span class="detail" >气压 {{pressure}}hPa</span>
                </div>
            </div>
            <div class="right">
                <img src="http://mat1.gtimg.com/pingjs/ext2020/weather/pc/icon/currentweather/day/{{weather_code}}.png" alt="">
            </div>
        </script>
        <div class="every-hour" >
            <div style="height: 30px;padding: 20px 40px 0;">
                <div class="tip1" >
                    <span>逐小时预报数据</span>
                    <span style="font-size: 12px;opacity: 0.4;" >来源于中国天气网</span>
                </div>
                <div style="float: right;" >
                    <a class="a-btn" href="javascript:changeItem(-1);">&lt;</a>
                    <a class="a-btn" href="javascript:changeItem(1);">&gt;</a>
                </div>
            </div>
            <ul class="hour-list" style="left: 0px;" >
                <li>
                    <div>08:00</div>
                    <div>
                        <img class="weather-icon" src="http://mat1.gtimg.com/pingjs/ext2020/weather/pc/icon/weather/day/02.png" alt="">
                    </div>
                    <div>8°</div>
                </li>
                <li>
                    <div>08:00</div>
                    <div>
                        <img class="weather-icon" src="http://mat1.gtimg.com/pingjs/ext2020/weather/pc/icon/weather/day/02.png" alt="">
                    </div>
                    <div>8°</div>
                </li>
                <li>
                    <div>08:00</div>
                    <div>
                        <img class="weather-icon" src="http://mat1.gtimg.com/pingjs/ext2020/weather/pc/icon/weather/day/02.png" alt="">
                    </div>
                    <div>8°</div>
                </li>
            </ul>
            <script id="hour-list-temp" type="text/html" >
                {{each arr hour }}
                {{if hour.type}}
                <li>
                    <div>{{hour.time}}</div>
                    <div>
                        <img class="weather-icon"
                        src="http://mat1.gtimg.com/pingjs/ext2020/weather/pc/icon/weather/{{hour.icon}}.png" alt="">
                    </div>
                    <div>{{hour.text}}</div>
                </li>
                {{else}}
                <li>
                    <div>{{hour.time}}</div>
                    <div>
                        <img class="weather-icon"
                        src="http://mat1.gtimg.com/pingjs/ext2020/weather/pc/icon/weather/day/{{hour.weather_code}}.png" alt="">
                    </div>
                    <div>{{hour.degree}}°</div>
                </li>
                {{/if}}

                {{/each}}
            </script>
        </div>
    </div>
</body>
</html>